<template>
    <div class="card">
        <a-card>
            <div class="ard">
                <a-radio-group v-model="radio2">
                    <a-radio-button :value="1">全部</a-radio-button>
                    <a-radio-button :value="2">进行中</a-radio-button>
                    <a-radio-button :value="3">已超时</a-radio-button>
                    <a-radio-button :value="4">已完成</a-radio-button>
                </a-radio-group>
                <div class="asd">
                    <span>开始时间：</span>
                    <a-date-picker v-model="value1" type="date" placeholder="点击选择时间" :size="size" />
                </div>
                <div class="asd">
                    <span>结束时间：</span>
                    <a-date-picker v-model="value2" type="date" placeholder="点击选择时间" :size="size" />
                </div>
                <div class="asd">
                    <span>选择任务类型：</span>
                    <a-select v-model="value" class="m-2" placeholder="下拉选择" style="width: 170px">
                        <a-select-option v-for="item in options" :key="item.value" :value="item.value"
                            :label="item.label" />
                    </a-select>
                </div>
                <a-button style="margin-left: 10px" type="primary" :icon="FilterOutlined">
                    筛选
                </a-button>
                <a-button type="primary" :icon="PlusOutlined">新增</a-button>
            </div>
        </a-card>
        <a-card class="box-card">
            <div class="cardtop">
                <div class="margins">
                    <span>
                        <a-color-picker v-model="objs.asd1" show-alpha />攻击组
                    </span>
                    <span>
                        <a-color-picker v-model="objs.asd2" show-alpha />防御组
                    </span>
                    <span>
                        <a-color-picker v-model="objs.asd3" show-alpha />目标组
                    </span>
                </div>
                <a-radio-group v-model="radio1" size="small">
                    <a-radio-button :value="year">年</a-radio-button>
                    <a-radio-button :value="month">月</a-radio-button>
                    <a-radio-button :value="day">日</a-radio-button>
                </a-radio-group>
            </div>
            <div id="gantt_here" style="margin-top: 10px;" class="gantt-container"></div>
        </a-card>
    </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'
import productPlan from '@/api/production/ticketManagementaApi'
import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import { Plus, Filter } from '@element-plus/icons-vue'

const data = reactive({})
const radio1 = ref('年')
const radio2 = ref('全部')
const value1 = ref('')
const value = ref('')
let objs = reactive({
    asd1: '#f2e6c2',
    asd2: '#b5e09b',
    asd3: '#baefe2'
})
let dialogVisible = ref(false)
var tasks = {
    data: [
        // {
        //     id: 1,
        //     taskcode: 'F001',
        //     taskname: '明天吃烩菜',
        //     start_date: "12-04-2018",
        //     duration: 1,
        //     text: '李大厨',
        //     tsakrank: 0,
        // },
    ],
    // links: [
    // 	{ id: 1, source: 1, target: 2, type: "1" },
    // 	{ id: 2, source: 2, target: 3, type: "0" },
    // 	{ id: 3, source: 3, target: 4, type: "1" },
    // 	{ id: 4, source: 4, target: 5, type: "0" },
    // ]
};


//初始化甘特图
const initGantt = () => {
    //var result = []
    productPlan.newQueryProductionPlan({})
        .then(res => {
            tasks.data = res
            gantt.config.grid_width = 350
            gantt.config.add_column = false //添加符号
            gantt.config.autosize = true//自适应尺寸
            gantt.config.autofit = true// 表格列宽自适应
            gantt.config.autoscroll = true// 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果
            gantt.config.drag_progress = false//取消任务进度条进度拖动
            gantt.config.scale_height = 60
            gantt.config.row_height = 60
            gantt.config.bar_height = 34
            gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
            gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
            gantt.i18n.setLocale('cn') //设置语言
            //时间栏配置
            gantt.config.scales = [
                { unit: 'month', step: 1, format: '%Y年%m月' },
                { unit: 'day', step: 1, format: '%m/%d' },
            ]
            //左侧列表配置
            gantt.config.columns = [
                { name: "taskcode", label: "产线编码", align: 'left', tree: true, width: 140 },
                {
                    name: "taskname", label: "产线名称", align: 'center', width: 100,
                },
            ]
            //鼠标移入弹框
            // gantt.templates.tooltip_text = function (tasks) {
            //     return `
            // 	<div style="width: 200px;height: 200px;">
            //             <p>任务名称：这是一个任务</p>
            //             <p>任务策划：张三</p>
            // 			<p>当前状态：进行中</p>
            //             <p>任务类别：攻击</p>
            //             <p>开始时间：2020-12-11</p>
            //             <p>结束时间：2021-04-13</p>
            //     </div>
            // 	`
            // };
            //更改父项图标
            gantt.templates.grid_folder = (item) => {
                return ""
            }
            gantt.plugins({
                marker: true
            });
            var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
            var today = new Date();
            gantt.addMarker({
                start_date: today,
                css: "today",
                text: "今天",
                title: "今天: " + date_to_str(today)
            });
            //更改子项图标
            gantt.templates.grid_file = (item) => {

                return ""
            }
            //任务条显示内容
            gantt.templates.task_text = function (start, end, task) {

                return `
			<div style="color:#454545;font-size:14px;font-weight:700;">执行：${task.text, task.start_date}</div>
		`
            }
            //任务条左侧配置
            // gantt.templates.leftside_text = function (start, end, task) {
            // 	return `<div class="jindu" style="width:100%;height:30px;background-color:#e6f4ff;padding-left:10px;font-size:13px;color:#629eff;"><span>当前进度${(task.progress * 100).toFixed(0) + "%"}</span></div>`;
            // };
            //展开树图标
            gantt.templates.grid_open = function (item) {
                return `<i style="font-size:14px;background:none; color:#1890ff; padding-left:10px;" class="gantt_tree_icon gantt_${item.$open ? "close" : "open"}  iconfont  ${item.$open ? 'icon-zhankaishousuo' : 'icon-zhankaishousuo1'}"></i>`
            };

            gantt.init('gantt_here')  //初始化
            gantt.parse(tasks)   //填充数据

            //双击事件
            gantt.attachEvent("onTaskDblClick", function (id, e) {
                // 在这里编写处理双击事件的代码
                console.log("双击了任务：" + id);
                dialogVisible.value = true
            });
            //return result
        }).catch(e => console.log(e));






}
// 监听 result 变化
watch(() => tasks.data, (newVal) => {
    debugger;
    if (newVal) {
        // 转换接口数据为甘特图需要的数据结构
        const formattedData = newVal.map((item, index) => ({
            id: index + 1,
            taskcode: item.productionLineCode, // 假设接口返回字段
            taskname: item.productionLineName,
            start_date: formatDate(item.startTime), // 需要日期格式化
            duration: calculateDuration(item.startTime, item.endTime),
            text: item.operator,
            tsakrank: 0,
        }))

        // 更新甘特图数据
        ganttData.value = {
            data: formattedData,
            // links: [...] // 如果需要动态链接也需要处理
        }

        // 重新渲染甘特图
        if (window.gantt) {
            window.gantt.clearAll()
            window.gantt.parse(ganttData.value)
        }
    }
}, { deep: true })

onBeforeMount(() => { })
onMounted(() => {
    initGantt()
})
watchEffect(() => { })
defineExpose({
    ...toRefs(data)
})
</script>
<style scoped lang="scss">
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.renwus {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow: auto;
}

.renwu {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

:deep(.el-progress-circle) {
    width: 100px !important;
    height: 80px !important;
}

.ps {

    padding: 0;
    margin: 0;

}

.percentage-value {
    display: block;
    margin-top: 10px;
    font-size: 28px;
}

.percentage-label {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
}

.demo-progress .el-progress--circle {
    margin-right: 15px;
}

.cardtop {


    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .margins {
        display: flex;
        font-size: 12px;

        p {
            margin-left: 10px;

            :deep(.el-color-picker .el-color-picker__icon) {
                opacity: 0;
            }

            :deep(.el-color-picker__trigger) {
                border: none;
                width: 25px;
                height: 25px;
            }
        }
    }
}

.box-card {
    margin-top: 20px;
}

.card {
    width: 1500px;
    height: 1000px;
    margin: 0 auto;

    .ard {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
    }

    .icons {
        width: 80px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #a0cfff;
        color: #46a2ff;
        margin-right: 10px;
        border-radius: 7px;
        background-color: #ecf5ff;

        i {
            color: #1890ff;
            font-size: 14px;
            margin-right: 5px;
        }
    }
}

.asd {
    width: 300px;
    height: 33px;
    border-radius: 5px;
    border: 1px dotted #ccc;
    margin-left: 20px;
    display: flex;
    align-items: center;

    p {
        color: #606266;
        margin-left: 5px;
    }

    :deep(.el-input__wrapper) {
        border: none;
        box-shadow: none !important;

    }

    :deep(.el-date-editor.el-input) {
        width: 200px !important;
    }

    :deep(.el-select__wrapper) {
        border: none;
        box-shadow: none !important;
    }
}

:deep(.gantt_layout_cell) {
    border-radius: 7px;
}

:deep(.gantt_tree_indent) {
    opacity: 0;
}

:deep(.gantt_grid_scale .gantt_grid_head_cell) {
    color: #606266;
    font-size: 15px;
    font-weight: 700;
    border-right: 1px solid #ccc !important;
}

:deep(.gantt_scale_cell) {
    color: #454545 !important;
}

:deep(.gantt_grid_data .gantt_cell) {
    border-right: 1px solid #ccc !important;
    padding: 0;

}

:deep(.gantt_task_progress_wrapper) {
    border-radius: 5px;
}

:deep(.gantt_task_line.gantt_project) {
    border-radius: 5px;
    border: none;
}

:deep(.gantt_data_area div) {
    border-radius: 5px;
    // border:none;
}

:deep(.gantt_tree_content) {
    display: flex;
    align-items: center;


    .jindu {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #4482e3;
        border-radius: 10px;
    }

    .tasktype {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }



}

:deep(.gantt_task_line) {
    border: none;
}

:deep(.gantt_link_point) {
    display: none !important;
}

:deep(.gantt_task_progress) {
    height: 100%;
}

.toppingTask {
    width: 200px;
    height: 200px;
    background-color: #1890ff;
}
</style>